import { useState, useEffect } from 'react';
import Mock from 'mockjs';

import Show from './show';
import Config from './config';

// TODO：从后端获取数据

const Compose = () => {
  const [projectDataSource, setProjectDataSource] = useState<PT.Project[]>();
  useEffect(() => {
    const { dataSource }: { dataSource: PT.Project[] } = Mock.mock({
      'dataSource|10': [
        {
          'key|+1': 1,
          'id|+1': 1,
          'teacher|+1': ['张三', '黄奕鹏', '李马星'],
          'name|+1': [
            '退役锂电材料短程循环与过程污染控制技术与评价方法研究',
            '电动汽车全生命周期分析与环境评价',
            '停车相关管理系统及平台',
            '大型复杂结构施工监控关键技术研究',
          ],
          'enterprise|+1': [
            '广东邦普循环科技有限公司',
            '广东艾科智泊科技股份有限公司',
            '佛山市顺德区高新技术企业协会	',
            '广东施泰宝医疗科技有限公司',
          ],
          'invest|10-100': 1,
          'needStudent|1-20': 1,
          createTime: '@date("yyyy")',
          startTime: '@date("yyyy-MM-dd")',
          endTime: '@date("yyyy-MM-dd")',
          'state|+1': ['未审核', '已通过', '已驳回'],
        },
      ],
    });
    setProjectDataSource(dataSource);
  }, []);

  return (
    <>
      <Config />
      {projectDataSource ? (
        <Show projectDataSource={projectDataSource}></Show>
      ) : (
        <div>数据获取失败</div>
      )}
    </>
  );
};

export default Compose;
